<template>
    <div>
      <div class="top-wrap">
        <div class="img-wrap">
          <!-- 封面 -->
          <img :src="playlist.coverImgUrl" alt="" />
        </div>
        <div class="info-wrap">
          <!-- 名字 -->
          <p class="title">{{ playlist.name }}</p>
          <div class="author-wrap">
            <!-- 头像 -->
            <img class="avatar" :src="playlist.creator.avatarUrl" v-if="playlist.creator !== undefined" alt="" />
            <!-- 名字 -->
            <span class="name" v-if="playlist.creator !== undefined">{{ playlist.creator.nickname }}</span>
            <!-- 时间 -->
            <span class="time">{{ playlist.createTime | dateFormat }}</span>
          </div>
          <div class="play-wrap">
            <el-button type="success" class="button">播放全部</el-button>
          </div>
          <div class="tag-wrap">
            <span class="title1">标签:</span>
            <ul>
              <li v-for="(item, index) in playlist.tags" :key="index">{{ item+"|" }}</li>
            </ul>
          </div>
          <div class="desc-wrap">
            <span class="title2">简介:</span>
            <span class="desc">{{ playlist.description }}</span>
          </div>
        </div>
      </div>
      <el-tabs class="tabs">
        <el-tab-pane label="歌曲" name="1">
          <el-table
            :data="playlist.tracks"
            stripe
            style="width: 100%">
            <el-table-column
              type="index"
              label="#"
              width="50">
            </el-table-column>
            <el-table-column
              label="音乐封面"
              width="180">
              <template slot-scope="scope">
                <img  :src="scope.row.al.picUrl" alt="" style="width: 70px;height: 70px">
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="音乐标题"
              width="180">
            </el-table-column>
            <el-table-column
              prop="ar[0].name"
              label="歌手"
              width="180">
            </el-table-column>
            <el-table-column
              prop="al.name"
              label="专辑"
              width="280">
            </el-table-column>
            <el-table-column
              label="播放"
              width="320">
              <template slot-scope="scope">
              <el-button type="primary" @click="playMusic(scope.row.id)">播放</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="评论" name="2">
          <div class='comment_list'>
            <dl v-for="(item,index) in hotComments" :key="index">
              <dt>
                <img :src="item.user.avatarUrl" alt="" />
              </dt>
              <dd class="name1">
                {{item.user.nickname + ":"}}
              </dd>
              <dd class="detail">
                {{item.content}}
              </dd>
              <br>
              <!-- 回复 -->
              <div class="re-content" v-if="item.beReplied.length !== 0">
                <span class="name1">{{ item.beReplied[0].user.nickname }}</span>
                <span class="comment">：{{ item.beReplied[0].content }}</span>
              </div>
              <div class="date">{{ item.time | dateFormat }}</div>
              <br>
              <hr/>
            </dl>
          </div>
        </el-tab-pane>
      </el-tabs>
      <audio ref='audio' :src="musicUrl" controls="controls" class="myaudio"></audio>
    </div>
</template>
<script>
export default {
  name: 'playlist',
  data () {
    return {
      img: '',
      name: '',
      musicUrl: '',
      playlist: {},
      hotComments: []
    }
  },
  created () {
    this.getPlaylist()
    this.getComment()
  },
  methods: {
    async getPlaylist () {
      const { data: res } = await this.$http.get(`playlist/detail?id=${this.$route.query.q}`)
      console.log(res)
      this.img = res.playlist.coverImgUrl
      this.name = res.playlist.name
      // this.picUrl = res.playlist.tracks.al.picUrl
      this.playlist = res.playlist
    },
    playMusic (musicId) {
      // 获取歌曲url
      this.$http.get('/song/url?id=' + musicId).then(response => {
        // 保存歌曲url地址
        this.musicUrl = response.data.data[0].url
        if (!response.data.data[0].url) {
          return this.$message.error('该资源为VIP专享，暂不支持播放 ！')
        }
        console.log(this.musicUrl)
      })
    },
    async getComment () {
      this.$http.get('/comment/playlist?id=' + this.$route.query.q).then(response => {
        // console.log(response)
        // 保存热门评论
        this.hotComments = response.data.comments
        console.log(response)
      })
    }
  }
}
</script>

<style lang="less" scoped>
  ul,
  ol {
    list-style: none;
  }
  .tag-wrap{
    position: relative;
  }
  li{
    display: inline-block;
  }
  li:nth-child(1) {
    position: absolute;
    top: 150px;
    left: 380px;
  }
  li:nth-child(2) {
    position: absolute;
    top: 150px;
    left: 450px;
  }
  li:nth-child(3) {
    position: absolute;
    top: 150px;
    left: 500px;
  }
  .top-wrap{
    position: relative;
  }
  .img-wrap img{
    width: 230px;
    height: 230px;
    position: absolute;
    top: 20px;
    left: 70px;
  }
  .avatar{
    position: absolute;
    left: 320px;
    top: 60px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
  }
  .title{
    position: absolute;
    left: 320px;
    top: 10px;
  }
  .name{
    position: absolute;
    left: 370px;
    top: 65px;
  }
  .time{
    position: absolute;
    left: 480px;
    top: 65px;
  }
  .button{
    position: absolute;
    left: 320px;
    top: 100px;
  }
  .title1{
    position: absolute;
    left: 320px;
    top: 150px;
  }
  .title2{
    position: absolute;
    left: 320px;
    top: 175px;
  }

  .desc{
    position: absolute;
    left: 320px;
    top: 200px;
    width: 960px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
    -webkit-box-orient: vertical; // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
    -webkit-line-clamp: 4;
    font-size: 14px;
  }
  .tabs{
    position: absolute;
    top: 400px;
    left: 300px;
  }
  .myaudio{
    position: fixed;
    bottom: 0;
    width: 80%;
  }
  dd{
    float: left;
  }
  .comment_list img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .name1{
    color: #0086b3;
  }
  .re-content{
    background-color: #e6e5e6;
    margin-left: 80px;
  }
</style>
